<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 实现省级切换的切换框 -->
    <select class="province">
        <option value="-1">切换省级</option>
    </select>

    <!-- 实现市级切换的切换框 -->
    <select class="city">
        <option>切换市级</option>
    </select>

    <script>
        var data = [
            {
                name: '湖北省',
                son: ['武汉市', '襄阳市', '孝感市', '黄冈市'],
                // son: [
                //     {
                //         name: '武汉市',
                //         son: ['武昌区', '江夏区', '硚口区']
                //     },
                //     {
                //         name: '武汉市',
                //         son: ['武昌区', '江夏区', '硚口区']
                //     }
                // ]
            },
            {
                name: '河南省',
                son: ['郑州市', '信阳市', '新乡市', '开封市']
            }
        ]

        //获取省市级的dom值
        var oProvince = document.querySelector('.province')
        var oCity = document.querySelector('.city')
        // console.log(oCity)

        var provinceHtml = `<option value="-1">切换省级</option>`;
        data.forEach(function (item, index) {
            provinceHtml += `<option value="${index}">${item.name}</option>`
        })

        oProvince.innerHTML = provinceHtml
        // console.log(oProvince.innerHTML)

        oProvince.onchange = function () {
            var index = this.value;

            var cityHtml = `<option>切换市级</option>`;
            if (index >= 0) {
                data[index].son.forEach(function (item) {
                    cityHtml += `<option>${item}</option>`
                })
            }

            oCity.innerHTML = cityHtml
        }







    </script>

</body>

</html>